<template>
  <div class="full-calendar-header">
    <div class="header-left"
         @click.stop="goPrev">
      <!-- <slot name="header-left">
        
      </slot> -->
      <span class="prev-month">{{leftArrow}}</span>
    </div>
    <div class="header-center">

      <span class="title">{{title}}</span>

    </div>
    <div class="header-right"
         @click.stop="goNext">
      <!-- <slot name="header-right">
      </slot> -->
      <span class="next-month">{{rightArrow}}</span>
    </div>
  </div>
</template>
<script type="text/babel">
import dateFunc from './dateFunc'

export default {
  created () {
    this.dispatchEvent()
  },
  props: {
    currentDate: {},
    titleFormat: {},
    firstDay: {},
    monthNames: {}
  },
  data () {
    return {
      title: '',
      leftArrow: '<',
      rightArrow: '>',
      headDate: new Date()
    }
  },
  watch: {
    currentDate (val) {
      if (!val) return
      this.headDate = val

      // this.headDate = JSON.parse(JSON.stringify(val))
    }
  },
  inject:['initClick'],
  mounted() {
    this.initClick(this.title)
  },
  methods: {
    goPrev () {
      this.headDate = this.changeMonth(this.headDate, -1)
      this.dispatchEvent()
      this.initClick(this.title)
    },
    goNext () {
      this.headDate = this.changeMonth(this.headDate, 1)
      this.dispatchEvent()
      this.initClick(this.title)

    },
    changeMonth (date, num) {
      let dt = new Date(date)
      dt.setDate(1)
      dt.setMonth(dt.getMonth() + num);
      // return new Date(dt.setMonth(dt.getMonth() + num));
      return new Date(dt)
    },
    dispatchEvent () {
      this.title = dateFunc.format(this.headDate, this.titleFormat, this.monthNames)

      let startDate = dateFunc.getStartDate(this.headDate)
      let curWeekDay = startDate.getDay()

      // 1st day of this monthView
      let diff = parseInt(this.firstDay) - curWeekDay
      if (diff) diff -= 7
      startDate.setDate(startDate.getDate() + diff)

      // the month view is 6*7
      let endDate = dateFunc.changeDay(startDate, 41)

      // 1st day of current month
      let currentDate = dateFunc.getStartDate(this.headDate)

      this.$emit('change',
        dateFunc.format(startDate, 'yyyy-MM-dd'),
        dateFunc.format(endDate, 'yyyy-MM-dd'),
        dateFunc.format(currentDate, 'yyyy-MM-dd'),
        this.headDate,this.title
      )
      // console.log(this.title,"------日历")
    }
  }
}
</script>
<style lang="scss">
.full-calendar-header {
  display: flex;
  align-items: center;
  .header-left,
  .header-right {
    flex: 1;
    height: 60px;
    border: 1px solid #e0e0e0;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
  }
  .header-right:hover {
    background: #007aff;
    color: #ffffff;
  }
  .header-left:hover {
    background: #007aff;
    color: #ffffff;
  }
  .header-center {
    flex: 8;
    text-align: center;
    border: 1px solid #e0e0e0;
    height: 60px;
    .title {
      margin: 0 10px;
      font-size: 24px;
      line-height: 60px;
      font-weight: bold;
    }
    .prev-month,
    .next-month {
      cursor: pointer;
      font-size: 30px;
    }
  }
}
</style>
